<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>申请加盟</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link href="../../css/mui.picker.css" rel="stylesheet" />
		<link href="../../css/mui.poppicker.css" rel="stylesheet" />
		<!--App自定义的css-->
		<!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
		<style>
			h5 {
				margin: 5px 7px;
			}
			
			.mui-input-row .mui-btn {
			    line-height: 1.1;
			    float: right;
			    width:65%;
			    padding: 10px 15px;
			}
			
			
			#fileMv{width: 40%;box-sizing: border-box;}
	 		#btnMv{width: 16%;box-sizing: border-box;right: 15px;padding: 8px 0px;}
	 		#fileLogo{width: 40%;box-sizing: border-box;}
	 		#btnLogo{width: 16%;box-sizing: border-box;right: 15px;padding: 8px 0px;}
	 		#fileShow{width: 40%;box-sizing: border-box;}
	 		#btnShow{width: 16%;box-sizing: border-box;right: 15px;padding: 8px 0px;}
	 		.mui-btn-outlined {margin-top: 6px;color: #00B4FF;border: 1px solid #00B4FF; }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册申请</h1>
			<button type="button" id="butSaveTop" class="mui-btn mui-btn-link  mui-pull-right">
				保存
			</button>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" style="margin: 5px;">
				
				<form class="mui-input-group" id="fmInput">
					<div class="mui-input-row">
						<label>餐厅名称:</label>
						<input type="text" placeholder="请输入" v-model="fmWorkshop.workname" maxlength="22"/>
					</div>
					<div class="mui-input-row">
						<label>负责人:</label>
						<input type="text" placeholder="请输入" v-model="fmWorkshop.ceoname" maxlength="20"/>
					</div>
					<div class="mui-input-row">
						<label>联系电话:</label>
						<input type="text" placeholder="请输入" v-model="fmWorkshop.phonenum" maxlength="22"/>
					</div>
					<div class="mui-input-row">
						<label>所属城市:</label>
						<button id='butCity' class="mui-btn mui-btn-block" type='button'>{{citytitle}}</button>
					</div>
					<div class="mui-input-row">
						<label>所在辖区:</label>
						<button id='butDistrict' class="mui-btn mui-btn-block" type='button'>{{areatitle}}</button>
					</div>
					<div class="mui-input-row">
						<label>地址:</label>
						<input type="text" placeholder="请输入" v-model="fmWorkshop.address" maxlength="100"/>
					</div>
					
					<!--<div class="mui-input-row">
						<label>配送区域:</label>-->
						<li class="mui-table-view-cell mui-collapse"  id="divTradeAreaSel" style="list-style-type:none">
							<a class="mui-navigate-right" href="#">配送区域</a>
							<div class="mui-collapse-content">
								<div v-for="tra in fmWorkshop.ltTradeAreas" class="mui-input-row mui-checkbox mui-left">
									<label>{{tra.trade_area_name}}</label>
									<input name="chkTradeArea" :value="tra.taid" v-model="tra.checked" type="checkbox"/>
								</div>
								
							</div>
						</li>	
					<!--</div>-->	
					<div class="mui-input-row">
						<label>许可证编号</label>
						<input type="text" id="txtPrc" placeholder="请输入" v-model="fmWorkshop.license">
					</div>
					
					<div class="mui-input-row" style="margin: 10px 5px;height:120px">
						<textarea id="textarea" rows="5" placeholder="餐厅介绍" v-model="fmWorkshop.recommend"></textarea>
					</div>
					
					<div class="mui-input-row" style="margin: 10px 5px;height:180px">
						
						<table border="0" width="100%">
							<tr>
								<td align="center" colspan="2">
									地理位置
								</td>
							</tr>
							
							<tr>
								<td width="60%" align="left">
									<!--<img src="../../images/chinamap.png" width="100%" height="150px" id="imgMap"/>-->
									<div id="divMap" 
									    style="
									        margin-top:10px; 
									        width: '100%'; 
									        height: 150px; 
									        border: 1px solid gray;
									        overflow:hidden;">
									</div>
								</td>
								<td>
									<table width="100%">
										<tr>
											<td width="30%">经度:</td>
											<td><input type="number" placeholder="经度" id="txtGpsx" v-model="fmWorkshop.gpsx" maxlength="8"/></td>
										</tr>	
										<tr>	
											<td>纬度:</td>
											<td><input type="number" placeholder="纬度" id="txtGpsy" v-model="fmWorkshop.gpsy" maxlength="8"/></td>
										</tr>	
									</table>
									
								</td>
							</tr>
							
						</table>
					</div>
					
					<div class="mui-input-row">
						<label>上传LOGO</label>
						<button type="button" id="btnLogo" class="mui-btn mui-btn-outlined">上传</button>
						<input type="file"  id="fileLogo" name="fileLogo" accept="image/*" capture="camera">
						
					</div>
					
					<div id="divLogo" class="mui-input-row"  style="margin: 10px 5px;height:0px;visibility: hidden;">
						<label></label>
						<img id="imgLogo"  width="100px" height="80px" :src="fmWorkshop.piclogopath"/>

					</div>
					
					<div class="mui-input-row">
						<label>上传展示图</label>
						<button type="button" id="btnShow" class="mui-btn mui-btn-outlined">上传</button>
						<input type="file"  id="fileShow" name="fileShow" accept="image/*" capture="camera">
						
					</div>
					
					<div id="divShow" class="mui-input-row"  style="margin: 10px 5px;height:0px;visibility: hidden;">
						<label></label>
						<img id="imgShow"  width="230px" height="170px"  :src="fmWorkshop.picshowpath"/>

					</div>
					
					<div class="mui-input-row">
						<label>上传MV</label>
						<button type="button" id="btnMv" class="mui-btn mui-btn-outlined">上传</button>
						<input type="file" id="fileMv" name="fileMv" accept="video/*" capture="camcorder">
						
					</div>
					<div id="divMv" class="mui-input-row"  style="margin: 10px 5px;height:0px;visibility: hidden;">
						<label>我的MV</label>
						<video id="mvShow"  width="230px" height="170px"  controls="controls" autoplay="autoplay" webkit-playsinline>
							<!--<source :src="fmWorkshop.mvshowpath" type="video/mp4"></source>-->
						</video>
					</div>
					
					
					<div class="mui-button-row">
						<button type="button" id="butSave" class="mui-btn mui-btn-primary" >确认</button>&nbsp;&nbsp;
						<button type="button" id="butCancel" class="mui-btn mui-btn-danger" >取消</button>
					</div>
					
				</form>
				
				
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/mui.picker.js"></script>
		<script src="../../js/mui.poppicker.js"></script>
		<script src="../../js/tools.js"></script>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
		<script src="gps.js"></script>
		<script src="../../js/fileupload.js"></script>
		
		<script>
			var theVue;
			
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			
			document.getElementById("butCancel").addEventListener('tap', function(e) 
			{
				mui.back();
			});
			
			var ditPicker = new mui.PopPicker({layer: 2});
			document.getElementById('butDistrict').addEventListener('tap', function(event) 
			{
				if(theVue.fmWorkshop.areacode == "" || theVue.fmWorkshop.areacode == null)
				{
					mui.toast("请先选择所在城市");
					return;
				}
				
				genpost('/zdm/AppApi/Search/GetTradeAreasByCityCode',
					{cityCode:theVue.fmWorkshop.areacode},
					function(data)
					{
						ditPicker.setData(data);
					}
				);
				
				ditPicker.show(function(items) 
				{
					theVue.fmWorkshop.areaname = items[0].text;
					theVue.fmWorkshop.tareaname = items[1].text;
					theVue.fmWorkshop.ditid = items[0].value;
					theVue.fmWorkshop.taid = items[1].value;
				});
			});
			
			
			document.getElementById("divTradeAreaSel").addEventListener('tap', function(e) 
			{

				
//				for(i=0;i<theVue.m_ltTradeAreas.length;i++)
//				{
//					//alert("taid="+theVue.m_ltTradeAreas[i].taid+" check="+theVue.m_ltTradeAreas[i].checked);
//					console.log("taid="+theVue.m_ltTradeAreas[i].taid+" check="+theVue.m_ltTradeAreas[i].checked);
//				}
			});
			
			document.getElementById("butCity").addEventListener('tap', function(e) 
			{
				g_jsonData.putData("retUrl","/html/workshop/reg.html");
				mui.openWindow(
				{
			     	url: 'setcity.html', 
			     	id:'setcity.html'
			  	});
			});
			
			document.getElementById("divMap").addEventListener('tap', function(e) 
			{
				g_jsonData.putData("retUrl","/html/workshop/reg.html");
				mui.openWindow(
				{
			     	url: 'setgps.html', 
			     	id:'setgps.html'
			  	});
			});
			
			document.getElementById("btnLogo").addEventListener('tap', function(e) 
			{	
				if(document.getElementById("fileLogo").value == "")
				{
					mui.toast("请选择LOGO图片");
					return;
				}
				
				mui.alert("建议使用wifi或4g上传", "准点猫", function() 
				{
					var objFile = document.getElementById("fileLogo").files[0];
					if(objFile.size > 5*1024*1024)
					{
						mui.toast("图片文件不要大于5M");
						return;
					}

					document.getElementById("btnLogo").disabled = true;
					var iPointTime = 1;
					debugger;
					var iHand = setInterval(function()
					{
						var strPoint = "";
						var iTmp = 0;
						for(iTmp = 0;iTmp<iPointTime;iTmp++)
						{
							strPoint += ".";
						}
						iPointTime++;
						if(iPointTime > 8)
						{
							iPointTime = 1;
						}
						
						document.getElementById("btnLogo").innerText = strPoint;
					},1000);
					postFile(objFile,
					g_SrvUrl+"/zdm/commonPictures/gennerUpLoadImg.do",
					function(p_retVal)
					{
						document.getElementById("btnLogo").disabled = false;
						document.getElementById("btnLogo").innerText = "上传";
						theVue.fmWorkshop.piclogoid = p_retVal.FileId;
						theVue.fmWorkshop.piclogopath = p_retVal.SmallHttpPath;
						//document.getElementById("imgLogo").src = p_retVal.SmallHttpPath;
						document.getElementById("divLogo").style.height = "90px";
						document.getElementById("divLogo").style.visibility ="visible";
						clearInterval(iHand); 
					});
				});
				
			});
			
			
			document.getElementById("btnShow").addEventListener('tap', function(e) 
			{	
				if(document.getElementById("fileShow").value == "")
				{
					mui.toast("请选择展示图片");
					return;
				}
				
				mui.alert("由于文件较大，请用wifi或4g上传", "准点猫", function() 
				{
					var objFile = document.getElementById("fileShow").files[0];
					if(objFile.size > 5*1024*1024)
					{
						mui.toast("图片文件不要大于5M");
						return;
					}

					document.getElementById("btnShow").disabled = true;
					var iPointTime = 1;
					debugger;
					var iHand = setInterval(function()
					{
						var strPoint = "";
						var iTmp = 0;
						for(iTmp = 0;iTmp<iPointTime;iTmp++)
						{
							strPoint += ".";
						}
						iPointTime++;
						if(iPointTime > 8)
						{
							iPointTime = 1;
						}
						
						document.getElementById("btnShow").innerText = strPoint;
					},1000);
					postFile(objFile,
					g_SrvUrl+"/zdm/commonPictures/gennerUpLoadImg.do",
					function(p_retVal)
					{
						document.getElementById("btnShow").disabled = false;
						document.getElementById("btnShow").innerText = "上传";
						theVue.fmWorkshop.picshowid = p_retVal.FileId;
						theVue.fmWorkshop.picshowpath = p_retVal.SmallHttpPath;
						//document.getElementById("imgShow").src = p_retVal.SmallHttpPath;
						document.getElementById("divShow").style.height = "180px";
						document.getElementById("divShow").style.visibility ="visible";
						clearInterval(iHand); 
					});
				});
				
			});
			
			
			document.getElementById("btnMv").addEventListener('tap', function(e) 
			{	
				if(document.getElementById("fileMv").value == "")
				{
					mui.toast("请选择视频");
					return;
				}
				
				mui.alert("由于视频文件较大，请用wifi或4g上传", "准点猫", function() 
				{
					var objFile = document.getElementById("fileMv").files[0];
					if(objFile.size > 90*1024*1024)
					{
						mui.toast("视频文件不要大于90M");
						return;
					}
					//document.getElementById("btnMv").value = "....";
					document.getElementById("btnMv").disabled = true;
					var iPointTime = 1;
					debugger;
					var iHand = setInterval(function()
					{
						var strPoint = "";
						var iTmp = 0;
						for(iTmp = 0;iTmp<iPointTime;iTmp++)
						{
							strPoint += ".";
						}
						iPointTime++;
						if(iPointTime > 8)
						{
							iPointTime = 1;
						}
						
						document.getElementById("btnMv").innerText = strPoint;
					},1000);
					postFile(objFile,
					g_SrvUrl+"/zdm/commonPictures/gennerUpLoadFile.do",
					function(p_retVal)
					{
						document.getElementById("btnMv").disabled = false;
						document.getElementById("btnMv").innerText = "上传";
						clearInterval(iHand); 
						theVue.fmWorkshop.mvshowid = p_retVal.FileId;
						theVue.fmWorkshop.mvshowpath = p_retVal.HttpPath;
						
						//alert(p_retVal.HttpPath);
						var strMv = '<source src="'+p_retVal.HttpPath+'" type="video/mp4">';
						document.getElementById("mvShow").innerHTML = strMv;
						document.getElementById("mvShow").oncanplay=function(){
							document.getElementById("mvShow").play();
						};
						document.getElementById("divMv").style.height = "180px";
						document.getElementById("divMv").style.visibility ="visible";
						mui.toast("上传完毕");
					});
				});
				
			});
			
			document.getElementById("divMv").addEventListener('tap', function(e) 
			{	
				if(mui.os.android)
				{
					var Intent = plus.android.importClass("android.content.Intent");
	                var Uri = plus.android.importClass("android.net.Uri");
	                var main = plus.android.runtimeMainActivity();
	                var intent = new Intent(Intent.ACTION_VIEW);
	                var uri = Uri.parse(document.getElementById("hidMvPath").value);
	                intent.setDataAndType(uri, "video/*");
	                main.startActivity(intent);
				}
			});
			
			function fnSave()
			{
				if(theVue.fmWorkshop.workname.trim() == "")
				{
					mui.toast("请输入餐厅名称");
					return;
				}
				
				if(theVue.fmWorkshop.ceoname.trim() == "")
				{
					mui.toast("请输入负责人名称");
					return;
				}
				
				if(theVue.fmWorkshop.phonenum.trim() == "")
				{
					mui.toast("请输入餐厅联系电话");
					return;
				}
				
//				if(theVue.fmWorkshop.areacode.trim() == "")
//				{
//					mui.toast("请选择餐厅所在城市");
//					return;
//				}
				
				if(theVue.fmWorkshop.address.trim() == "")
				{
					mui.toast("请输入餐厅具体地址");
					return;
				}
				
				if(theVue.fmWorkshop.recommend.trim() == "" || theVue.fmWorkshop.recommend.trim().length<30)
				{
					mui.toast("请输入餐厅介绍且不少于30个字");
					return;
				}
				
//				if( (!isNumber(theVue.fmWorkshop.gpsx)) || (!isNumber(theVue.fmWorkshop.gpsy)) )
//				{
//					mui.toast("请设置餐厅正确的地理位置信息");
//					return;
//				}
				
				genpost('/zdm/AppApi/Merchant/insertMerchant',
				theVue.fmWorkshop,
				function(retData)
				{
					if(retData.entid != "")
					{
						mui.alert("申请成功，等待电话通知审核结果","准点猫",function(){
							mui.back();
						});
						
//						mui.openWindow(
//						{
//					     	url: 'index.html', 
//					     	id:'index.html'
//					  	});
					}
					else
					{
						mui.toast("申请失败");
					}
				});
			}
			
			document.getElementById("butSave").addEventListener('tap', function(e) 
			{
				//g_jsonData.putData("txtArea", document.getElementById("textarea").value);
				//g_jsonData.putData("bb", document.getElementById("txtSearch").value);
				fnSave();
			});
			
			document.getElementById("butSaveTop").addEventListener('tap', function(e) 
			{
				fnSave();
			});
			


			mui.plusReady(function() {
//				initNativeObjects();
//				showSoftInput();
			});

		</script>
		
		<script>
		theVue = new Vue({
		    el:'#fmInput',
		    methods:{
		        fnsubmit:function()
		        {
		        
		        }
		    },
		    data:
		    {
		    		priceNew:0,
			    fmWorkshop:
			    {
					workname:"",
					enttype:2,
					ceoname:"",
					phonenum:"",
					address:"",
					taid:"",
					ditid:"",
					areacode:"",
					license:"",
					recommend:"",
					gpsx:"",
					gpsy:"",
					piclogoid:"",
					picshowid:"",
					mvshowid:"",
					piclogopath:"",
					picshowpath:"",
					mvshowpath:"",
					cityname:"",
					provname:"",
					areaname:"",
					tareaname:"",
					ltTradeAreas:[]
				}
				
		    },
		    computed: 
		    {
		    		citytitle:function() 
	        		{console.log("this.fmWorkshop.cityname="+this.fmWorkshop.cityname);
	        			var strRet = "";
	        			if(this.fmWorkshop.cityname != "" && this.fmWorkshop.cityname != undefined)
					{
						strRet = this.fmWorkshop.cityname + "," + this.fmWorkshop.provname;
						console.log("citytitle=" + strRet);
						if(strRet == ",")
						{
							strRet = "请选择城市...";
						}
					}
					else
					{
						strRet = "请选择城市...";
					}
		            return strRet;
	        		}
	        		,
	        		areatitle:function() 
	        		{
		            console.log("this.fmWorkshop.areaname=" + this.fmWorkshop.areaname);
					console.log("this.fmWorkshop.tareaname=" + this.fmWorkshop.tareaname);
					var strRet = "";
					if(this.fmWorkshop.areaname != "" && this.fmWorkshop.areaname != undefined)
					{
						strRet = this.fmWorkshop.areaname + ",";				
					}
					else
					{
						strRet = ",";
					}
					
					if(this.fmWorkshop.tareaname != "" && this.fmWorkshop.tareaname != undefined)
					{
						strRet += this.fmWorkshop.tareaname;				
					}
					
					console.log("theVue.fmWorkshop.areatitle=" + strRet);
					if(strRet == undefined || strRet == "" || strRet == ",")
					{
						strRet = "请选择辖区...";
					}
					return strRet;
			    }
	    		}	
		    			
		});
		
		theVue.$watch('fmWorkshop', function (val) 
		{
			if(!isNumber(this.fmWorkshop.gpsx))
			{
				mui.toast("地理位置信息不正确");
				this.fmWorkshop.gpsx = 0;
			}
			
		 	if(!isNumber(this.fmWorkshop.gpsy))
			{
				mui.toast("地理位置信息不正确");
				this.fmWorkshop.gpsy = 0;
			}
		});
		
		//一下是定位部分
		var dbGpsx = 0;
		var dbGpsy = 0;
		var bHasGps = false;
		
		if( isNumber(document.getElementById("txtGpsx").value) && isNumber(document.getElementById("txtGpsy").value) )
		{
				bHasGps = true;
				dbGpsx = document.getElementById("txtGpsx").value;
				dbGpsy = document.getElementById("txtGpsy").value;
		}
		
		showMap("divMap","北京",bHasGps,dbGpsx,dbGpsy,function(p_jd,p_wd)
		{
				
		});
		
		//got all msg
		document.addEventListener('gotmsg', function(event) 
		{
			if(event.detail.msg == "setgps")
			{
				theVue.fmWorkshop.gpsx = event.detail.jd; 
			    	theVue.fmWorkshop.gpsy = event.detail.wd;
			    	var map = showMap("divMap","",true,event.detail.jd,event.detail.wd,function(p_jd,p_wd){	});
			    	var point = new BMap.Point(event.detail.jd, event.detail.wd);
			    var marker = new BMap.Marker(point);
			    map.addOverlay(marker);
			}
			
			if(event.detail.msg == "setcity")
			{
				theVue.fmWorkshop.areacode = event.detail.curCity.areacode; 
			    theVue.fmWorkshop.cityname = event.detail.curCity.areaname;
			    theVue.fmWorkshop.provname = event.detail.curCity.provname;
			    theVue.fmWorkshop.areaname = "";
			    theVue.fmWorkshop.tareaname = "";
			    
				g_jsonData.putData("curCity",event.detail.curCity.areaname);
				//在修改了本页所在城市后设置本页地图中心城市
				showMap("divMap",event.detail.curCity.areaname,false,0,0,function(p_jd,p_wd){});
				//设置本页配送区域初始化数据

				genpost('/zdm/AppApi/Search/TradeAreaList',
					{AreaCode:event.detail.curCity.areacode},
					function(data)
					{
						theVue.fmWorkshop.ltTradeAreas = data;
					}
				);

			}
		});
		
		</script>
		
			
	</body>

</html>